<template>
	<view>
		<view class="bg">
			<view style="position: relative;">
				<view class="title">附近门店</view>
				<image src="/static/wwc/left.png" mode=""
					style="width: 60rpx; height: 75rpx; position: absolute; left: 15rpx; top: 10rpx;"></image>
			</view>

			<uni-search-bar radius="100" placeholder="输入需要搜索的内容" @confirm="search" @cancel="cancel" cancel-text="cancel"
				clearButton="auto" cancelButton="none">
				<template v-slot:searchIcon>
					<image style="width: 30rpx; height: 30rpx;" src="/static/wwc/搜索@2x.png"></image>
				</template>
			</uni-search-bar>

			<view
				style="display: flex; justify-content: space-between; width: 680rpx; margin: 0 auto; align-items: center;">
				<text style="color: white;">历史记录</text>
				<text class="a">飞飞汽车美容店</text>
				<text class="a">飞飞汽修美容店</text>
				<text class="a">飞飞汽车美容店</text>
			</view>
			<view
				style="display: flex; justify-content: flex-start; width: 680rpx; margin: 0 auto; align-items: center; margin-top: 10rpx;">
				<text class="a">飞飞汽车美容店</text>
				<text class="a">飞飞汽车美容店</text>
				<text class="a">汽车美容店</text>
				<text class="a">汽修美容店</text>
			</view>
			<uni-card class="mapContain" :thumbnail="avatar" @click="onClick">
				<view style="display: flex; justify-content: space-between;">
					<!-- <view style="font-size: 16px;">商家:{{mksContents.title}}</view> -->
					<view style="font-size: 16px; color: black;">车百事汽车生活馆</view>
					<view style="color: #3184fc; font-size: 12px;">556m</view>
				</view>
				<view style="display: flex; color: black;">
					<uni-rate :touchable="false" :value="5" @change="onChange" />
					<text>4分</text>
					<text style="padding-left:20rpx;">销量：556</text>
				</view>
				<view style="display: flex; align-items: center;">
					<image src="/static/wwc/chebaishi.png" style="border-radius: 10rpx; height: 120rpx; width: 200rpx;"
						mode=""></image>
					<view style="display: flex; flex-direction: column; margin-left: 20rpx;">
						<view>营业时间：周一至周五</view>
						<view>早上8:00-晚上22:00</view>
						<view>山阳区人民路与解放路交叉口</view>
					</view>
				</view>
			</uni-card>

			<uni-card class="mapContain" :thumbnail="avatar" @click="onClick">
				<view style="display: flex; justify-content: space-between;">
					<!-- <view style="font-size: 16px;">商家:{{mksContents.title}}</view> -->
					<view style="font-size: 16px; color: black;">车百事汽车生活馆</view>
					<view style="color: #3184fc; font-size: 12px;">556m</view>
				</view>
				<view style="display: flex; color: black;">
					<uni-rate :touchable="false" :value="5" @change="onChange" />
					<text>4分</text>
					<text style="padding-left:20rpx;">销量：556</text>
				</view>
				<view style="display: flex; align-items: center;">
					<image src="/static/wwc/chebaishi.png" style="border-radius: 10rpx; height: 120rpx; width: 200rpx;"
						mode=""></image>
					<view style="display: flex; flex-direction: column; margin-left: 20rpx;">
						<view>营业时间：周一至周五</view>
						<view>早上8:00-晚上22:00</view>
						<view>山阳区人民路与解放路交叉口</view>
					</view>
				</view>
			</uni-card>

			<view style="font-size: 12px; color: #6a6a6a; text-align: center;">
				<text style="color: #e2e2e2;">—— </text>
				<text>暂无更多</text>
				<text style="color: #e2e2e2;"> ——</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
</script>

<style scoped>
	.bg {
		height: 400rpx;
		background-color: #3184fc;
	}

	.title {
		padding-top: 20rpx;
		font-size: 20px;
		color: white;
		padding-bottom: 20px;
		text-align: center;
	}

	.back {
		font-size: 20px;
		color: white;
	}

	.a {
		color: white;
		font-size: 12px;
	}
</style>